<template>
  <div class="myindex">
    <!-- 主题信息aaaaaaaaaaaaaaaa -->
    <div class="container mt-4">
      <div class="row perinfo">
        <!-- 左边功能栏 -->
        <div class="col-3 ">
          <!-- 用户信息头像框 -->
          <app-perinfo ></app-perinfo>
          <!-- 功能菜单 -->
          <div class="card  mt-4">
            <nav class="navbar navbar-expand-lg navbar-light bg-light flex-colum">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse flex-column" id="navbarNav">
                <ul class="navbar-nav flex-column align-middle" id="PerFun" @click="isclose=false">
                  <li class="nav-item">
                    <!-- <router-link class="nav-link" to="/myindex/perfun/123">个人信息</router-link> -->
                    <router-link class="nav-link" :to="{name:'PerFun',params:{id:123}}">个人信息</router-link>
                  </li>
                  <li class="nav-item">
                    <router-link class="nav-link" to="#">评论管理</router-link>
                  </li>
                  <li class="nav-item dropdown">
                    <span class="nav-link dropdown-toggle" data-toggle="collapse" href="#xinxiang">信箱管理</span>
                    <div id="xinxiang" class="collapse">
                      <li class="nav-item">
                        <router-link class="nav-link" :to="{name:'InBox'}">收件箱</router-link>
                      </li>
                      <li class="nav-item">
                        <router-link class="nav-link " :to="{name:'SendMail'}">发件箱</router-link>
                      </li>
                    </div>
              </li>
              <li class="nav-item">
                <router-link class="nav-link" :to="{name:'ArticMange',params:{id:123}}">文章管理</router-link>
              </li>
              <li class="nav-item">
                <router-link class="nav-link" to="/guidang">个人归档</router-link>
              </li>
              <li class="nav-item disabled">
                <router-link class="nav-link" to="#">....</router-link>
              </li>
              </ul>
          </div>
          </nav>
        </div>
      </div>
      <!-- 右边展示区域 -->
      <div class="col-9 border">
        <!-- 判断公告是否显示 -->
        <div class="jumbotron h-100 w-100 text-center" v-if="isclose">
          <h1 class="">欢迎您: {{user.id}}</h1>
          <div class="card text-center mt-4">
            <div class="card-header page-item">
              <p><span class="text-warp">公告</span></p>
              <span class="text-warp">{{date}}</span>
            </div>
            <div class="card-body text-left">
              <p class=" ">尊敬的各位客户：</p>
              <p>&nbsp;&nbsp;首先，感谢广大客户一直以来对于TCT通测检测的发展和网站的关注与支持。近期，按照客户的建议和反馈，本司对网站进行了重新建设，并开始试运行
              </p>
              <p>&nbsp;&nbsp;由于网站改版可能导致部分栏目数据的丢失或者部分功能暂时无法使用，给广大客户带来的不便，恳请谅解。同时，欢迎对新网站多提宝贵意见，以促进网站的完善。
              </p>
            </div>
            <div class="card-footer">
              <p class="float-right">石家庄市软件学院项目组</p>
            </div>
          </div>
        </div>
        <!-- 显式路由 -->
        <router-view v-if="!isclose"></router-view>
      </div>
    </div>
  </div>
  </div>
</template>

<style scoped>
  #PerFun li {
    /* font-size: 1rem; */

    margin: 0.9375rem;
  }
</style>

<script>
  import perinfo from '../components/wj/PerInfo.vue'
  export default {

    name: "myindex",
    data() {
      return {
        user: {
          id: '',
        },
        date: new Date,
        // 显示公告 区域
        isclose:false
      }
    },
    // 注册组件
    components: {
      "app-perinfo": perinfo
    },
    methods: {

    },
    mounted() {
      this.user.id = window.sessionStorage.getItem("userEmail") === null ? "error" : window.sessionStorage.getItem("userEmail")
      // console.log(this.user.id)
      if (this.user.id == "error") {
        this.$router.push("/")
      }
    }
  }
</script>
